<template>
  <div class="image-progress-container">
    <!-- 这里是形象进度 -->
    <div class="model-area">
      <div id="model" style="width: 100%; height: 100%"></div>
    </div>

    <div class="left-container">
      <div class="part-header-con">施工进度</div>
      <div class="part-content-con">
        <ul>
          <li
            :class="{ active: item.id === activedLi }"
            v-for="item in btnList"
            :key="item.id"
            @click="handleLiClick(item)"
          >
            <!-- <p>{{ item.label }}</p>
            <p>{{ item.subLabel }}</p> -->

            <img :src="item.img" alt="">
            <p>{{ item.label }}</p>
          </li>
        </ul>
      </div>
    </div>

    <div class="right-container">
      <div class="part-header-con">{{ currentTitle }}</div>
      <div class="part-content-con">
        <div>
          <p style="background-color: #0bc8ac"></p>
          <span>已完成</span>
          <p style="background-color: #00a0e9"></p>
          <span>总量</span>
        </div>
        <div>
          <ul v-if="activatedItem.length">
            <li v-for="(item, index) in activatedItem" :key="index">
              <div>
                <span>
                  {{ item.title }}
                </span>
                <el-progress
                  :percentage="item.percentage.toFixed(2) - 0"
                  :stroke-width="18"
                  :text-inside="true"
                ></el-progress>
              </div>
              <div>
                <p style="background-color: #0bc8ac"></p>
                <span>{{ item.final }}</span>
                <p style="background-color: #00a0e9"></p>
                <span>{{ item.total }}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="notes-area">
      <div>
        <div>
          <p style="background-color: #bfbfbf"></p>
        </div>
        <div>未开工</div>
      </div>

      <div>
        <div>
          <p style="background-color: #ffa406"></p>
        </div>
        <div>施工中</div>
      </div>

      <div>
        <div>
          <p style="background-color: #00ff00"></p>
        </div>
        <div>已完成</div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  ReturnEbsStatusDto,
  GetEbsTypeMaterialTitle
} from '@/api/main'
export default {
  name: 'imageProcess',
  data () {
    this.rgba = [
      [100 / 255, 100 / 255, 100 / 255, 1],
      [234 / 255, 156 / 255, 12 / 255, 1],
      [0 / 255, 128 / 255, 0 / 255, 1]
    ]
    return {
      activedLi: 1,
      btnList: [
        {
          id: 0,
          label: '整体进度统计',
          img: require('@/assets/images/整体进度统计.png'),
          data: []
        },
        {
          id: 1,
          label: '主航道桥',
          img: require('@/assets/images/主航道桥.png'),
          data: [
            {
              title: '承台',
              final: 4,
              total: 4,
              percentage: 100.00
            },
            {
              title: '钻孔桩',
              final: 60,
              total: 60,
              percentage: 100.00
            },
            {
              title: '墩身',
              final: 0,
              total: 2,
              percentage: 0.00
            },
            {
              title: '主塔',
              final: 2,
              total: 48,
              percentage: 4.17
            },
            {
              title: '索',
              final: 0,
              total: 156,
              percentage: 0.00
            },
            {
              title: '钢桁梁',
              final: 0,
              total: 46,
              percentage: 0.00
            },
            {
              title: '下横梁',
              final: 0,
              total: 4,
              percentage: 0.00
            }
          ]
        },
        {
          id: 2,
          label: '非通航孔桥',
          img: require('@/assets/images/非通航孔桥.png'),
          data: [
            {
              title: '承台',
              final: 2,
              total: 2,
              percentage: 100.00
            },
            {
              title: '钻孔桩',
              final: 48,
              total: 48,
              percentage: 100.00
            },
            {
              title: '墩身',
              final: 0,
              total: 2,
              percentage: 0.00
            },
            {
              title: '钢桁梁',
              final: 0,
              total: 27,
              percentage: 0.00
            }
          ]
        },
        {
          id: 3,
          label: '专用航道桥',
          img: require('@/assets/images/专用航道桥.png'),
          data: [
            {
              title: '承台',
              final: 4,
              total: 4,
              percentage: 75.00
            },
            {
              title: '钻孔桩',
              final: 112,
              total: 112,
              percentage: 100.00
            },
            {
              title: '墩身',
              final: 1,
              total: 4,
              percentage: 25.00
            },
            {
              title: '钢桁梁',
              final: 0,
              total: 52,
              percentage: 0.00
            },
            {
              title: '钢拱肋',
              final: 0,
              total: 53,
              percentage: 0.00
            },
            {
              title: '吊索',
              final: 0,
              total: 22,
              percentage: 0.00
            }
          ]
        },
        {
          id: 4,
          label: '公铁合建段',
          img: require('@/assets/images/公铁合建段2.png'),
          data: [
            {
              title: '承台',
              final: 18,
              total: 25,
              percentage: 72.00
            },
            {
              title: '钻孔桩',
              final: 440,
              total: 471,
              percentage: 93.42
            },
            {
              title: '墩身',
              final: 0,
              total: 28,
              percentage: 0.00
            },
            {
              title: '预制混凝土连续箱梁',
              final: 0,
              total: 48,
              percentage: 0.00
            }
          ]
        },
        {
          id: 5,
          label: '高速公路、普通公路共线',
          // label: '一级公路共线',
          subLabel: '一级公路共线',
          img: require('@/assets/images/一级公路共线2.png'),
          data: [
            {
              title: '承台',
              final: 10,
              total: 27,
              percentage: 37.04
            },
            {
              title: '钻孔桩',
              final: 242,
              total: 242,
              percentage: 100.00
            },
            {
              title: '墩身',
              final: 0,
              total: 28,
              percentage: 0.00
            },
            {
              title: '预制混凝土连续箱梁',
              final: 0,
              total: 20,
              percentage: 0.00
            },
            {
              title: '现浇混凝土连续箱梁',
              final: 0,
              total: 6,
              percentage: 0.00
            }
          ]
        },
        {
          id: 6,
          label: '一级公路',
          img: require('@/assets/images/一级公路接线2.png'),
          data: [
            {
              title: '承台',
              final: 34,
              total: 45,
              percentage: 75.56
            },
            {
              title: '钻孔桩',
              final: 244,
              total: 256,
              percentage: 95.31
            },
            {
              title: '桥台',
              final: 0,
              total: 1,
              percentage: 0.00
            },
            {
              title: '墩身',
              final: 22,
              total: 40,
              percentage: 55.00
            },
            {
              title: '现浇混凝土连续箱梁',
              final: 0,
              total: 41,
              percentage: 0.00
            }
          ]
        }
      ],
      currentTitle: '',
      activatedItem: []
    }
  },
  inject: ['getViewer', 'handleModelDisplay', 'handleHtmlLabelShow'],
  mounted () {
    setTimeout(() => {
      this.cameraFlyTo()
      this.handleModelDisplay([])
      this.handleHtmlLabelShow([])
      this.handleLiClick(this.btnList[0])
    }, 300)

    this.$nextTick(() => {
      this.initModel()
    })
  },
  methods: {
    getEbsTypeMaterialTitle (partName) {
      GetEbsTypeMaterialTitle(partName).then(res => {
        console.log(res)
        if (res.data && res.data.length) {
          this.activatedItem = res.data.map(item => {
            return {
              title: item.Key,
              final: item.CompleteNum,
              total: item.TotalNum,
              percentage: item.TotalNum ? item.CompleteNum / item.TotalNum * 100 : 0
            }
          })

          this.activatedItem.sort((a, b) => {
            return b.percentage - a.percentage
          })
        }
      })
    },
    returnEbsStatusDto (callback) {
      // console.log(1232, ReturnEbsStatusDto)
      ReturnEbsStatusDto().then((res) => {
        if (res.data && res.data.length) {
          callback(res.data)
        } else {
          console.log('数据为空')
        }
      })
    },
    cameraFlyTo () {
      const viewer = this.getViewer()
      viewer.camera.flyTo({
        destination: {
          x: -2704375.736390461,
          y: 4690874.873157363,
          z: 3360338.7863809187
        },
        orientation: {
          heading: 6.1996333900179375,
          pitch: -0.2831979387394121,
          roll: 6.282923226019143
        }
      })
    },
    initModel () {
      this.bimEngineCenter = new BIMVIZ.RenderEngine({
        projectId: 'b54b6074-ceae-4742-9857-25806fdedbeb',
        renderDomId: 'model',
        ip: '58.49.74.231',
        port: 97,
        key: 'B3056CC9-13DB-4fcc-9FC3-6604D93304F4',
        resourcePath: '/viz/data',
        viewBox: {
          show: false
        },
        camera: {
          default: {
            position: new THREE.Vector3(
              -479830.46887118183,
              -2753577.475301795,
              913844.8809874349
            ),
            target: new THREE.Vector3(
              -217820.56934121702,
              -167699.88609359195,
              -375217.6351351731
            )
          }
        }
      })
      this.bimEngineCenter.start()
      this.bimEngineCenter.addListener(
        BIMVIZ.EVENT.OnSceneLoadCompleted,
        () => {
          // const list = this.bimEngineCenter.projectData.bimScene.ElementList
          this.returnEbsStatusDto((data) => {
            data.forEach(item => {
              this.bimEngineCenter.changeElementRGBA(
                item.ElementId,
                this.rgba[item.ProcessStatus]
              )
            })

            // const node = data.filter(item => item.EbsCode === '0100000201000100060001')
            // console.log(node)

            const arr = [
              '329e65df-272f-4e65-b90e-f619a97b7014-000983e5',
              '8a6ba554-8fcc-4abf-b098-c776892f0040-000a4da8',
              '8a6ba554-8fcc-4abf-b098-c776892f0040-000a4da7',
              '8a6ba554-8fcc-4abf-b098-c776892f0040-000a4da5',
              '560c1820-55b1-4c3a-a652-7724f45a2f00-000d5f48',
              '8a6ba554-8fcc-4abf-b098-c776892f0040-000a4dac',
              '8a6ba554-8fcc-4abf-b098-c776892f0040-000a4daa',
              '8a6ba554-8fcc-4abf-b098-c776892f0040-000a4da9'
            ]
            arr.forEach(item => {
              this.bimEngineCenter.changeElementRGBA(
                item,
                this.rgba[2]
              )
            })

            const arr2 = [
              '329e65df-272f-4e65-b90e-f619a97b7014-000983e7'
            ]
            arr2.forEach(item => {
              this.bimEngineCenter.changeElementRGBA(
                item,
                this.rgba[1]
              )
            })

            this.bimEngineCenter.addListener(
              BIMVIZ.EVENT.OnSelectElementPropertyList,
              (env) => {
                console.log(env)
              }
            )
          })
        }
      )
    },
    handleLiClick (item) {
      this.currentTitle = item.label + ' - 进度统计'
      this.activedLi = item.id
      this.activatedItem = item.data

      if (!item.id) {
        this.getEbsTypeMaterialTitle()
      } else {
        this.getEbsTypeMaterialTitle(encodeURIComponent(item.label))
      }
    }
  }
}
</script>

<style lang="less">
.image-progress-container {
  pointer-events: none;
  width: 100%;
  height: 100%;
  padding: 0 20px 30px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;

  * {
    pointer-events: all;
    user-select: none;
  }

  .el-progress-bar__outer {
    background-color: rgb(1, 214, 186);
  }

  .model-area {
    width: 98%;
    height: 93%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
    margin: auto;
    z-index: 0;
    background-color: rgba(14, 26, 37, 0.9);
    border-radius: 5px;
  }

  .left-container {
    width: 12%;
    height: 85%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: absolute;
    left: 35px;
    top: 50px;
    z-index: 1;

    .part-content-con {
      ul {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;

        // li {
        //   width: 185px;
        //   height: 75px;
        //   background: url("../../assets/images/2.png") no-repeat 0 0;
        //   background-size: 100% 100%;
        //   display: flex;
        //   flex-direction: column;
        //   justify-content: center;
        //   align-items: center;
        //   font-size: 20px;
        //   color: #01d6ba;
        //   cursor: pointer;
        // }

        // li:hover,
        // li.active {
        //   background: url("../../assets/images/1.png") no-repeat 0 0;
        //   background-size: 100% 100%;
        // }

        li {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 10px 0;
          cursor: pointer;
          overflow: hidden;

          img {
            width: 60%;
            border: 1px solid white;
          }

          p {
            margin-top: 5px;
            color: white;
            font-size: 15px;
          }
        }

        li:hover,
        li.active {
          img {
            border-color: #0BC8AC;
          }

          p {
            color: #0BC8AC;
            font-weight: bold;
          }
        }
      }
    }
  }

  .right-container {
    width: 20%;
    max-height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: absolute;
    right: 35px;
    top: 50px;
    z-index: 1;

    .part-content-con {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 20px;
      overflow: hidden;

      & > div:nth-of-type(1) {
        height: 40px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        span {
          color: white;
          font-size: 14px;
        }
        p {
          width: 15px;
          height: 15px;
          margin: 0 5px;
          border-radius: 3px;
        }
      }

      & > div:nth-of-type(2) {
        width: 100%;
        flex: 1;
        overflow: auto;
        ul {
          width: 100%;

          li {
            display: flex;
            padding: 0 15px 15px;

            & > div:nth-of-type(1) {
              height: 40px;
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: flex-end;

              span {
                color: white;
                font-size: 14px;
                font-weight: bold;
              }

              .el-progress-bar__innerText {
                color: black;
                font-weight: bold;
              }
            }

            & > div:nth-of-type(2) {
              height: 40px;
              width: 30%;
              display: flex;
              justify-content: space-between;
              align-items: flex-end;
              span {
                color: white;
                font-size: 14px;
              }
              p {
                width: 18px;
                height: 18px;
                margin: 0 5px;
                border-radius: 3px;
              }
            }
          }
        }
      }
    }
  }

  .notes-area {
    width: 15%;
    height: 100px;
    position: absolute;
    right: 30px;
    bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    & > div {
      width: 30%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 10px;

      & > div:nth-of-type(1) {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 2px solid white;
        display: flex;
        justify-content: center;
        align-items: center;

        p {
          width: 80%;
          height: 80%;
          border-radius: 50%;
          background-color: red;
        }
      }

      & > div:nth-of-type(2) {
        width: 100%;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: white;
      }
    }
  }

  .part-header-con {
    width: 100%;
    height: 30px;
    background: url("../../assets/intelligent-video/上.png") no-repeat 0 0;
    background-size: 100% 100%;
    font-size: 20px;
    color: white;
    padding-left: 10px;
    line-height: 30px;
  }

  .part-content-con {
    width: 100%;
    flex: 1;
    background: url("../../assets/intelligent-video/下.png") no-repeat 0 0;
    background-size: 100% 100%;
    overflow: hidden;
    position: relative;
  }
}
</style>
